<!--
 * @Description: 创建渠道活码
 * @Author: lixianggang
 * @Date: 2022-10-17 14:25:24
-->
<template>
  <div class="code-page">
    <div class="header-btn">
      <div>创建活码</div>
      <div>
        <el-button type="primary" @click="submit" :loading="pageLoading">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <el-form ref="codeForm" :model="codeForm" :rules="rules" label-width="120px" label-position="right">
      <div class="wrap g-card">
        <div class="title-header">基础设置</div>
        <div class="base-set ml20">
          <el-form-item label="活码名称" prop="activityName">
            <el-input v-model="codeForm.activityName" placeholder="请输入活码名称"></el-input>
          </el-form-item>
          <el-form-item label="被添加员工" required>
            <el-radio-group v-model="codeForm.ruleType">
              <el-radio :label="1">全天在线</el-radio>
              <el-radio :label="2">自动在线</el-radio> </el-radio-group><br />
            <el-button icon="el-icon-plus" @click="selectUserAdd" style="margin-top: 10px">添加员工</el-button>
            <span class="sub-text ml20">同一个活码可选择多位员工进行接待，客户扫码后按员工顺序添加</span>
          </el-form-item>
          <el-form-item label="" style="width: 930px;">
            <div class="limit-style">
              <span class="sub-text">员工添加上限：员工从该渠道添加的客户达到每日上限后，将自动下线当日不再接待该渠道新客户</span>
              <el-button @click="setOptions" :disabled="!optionFlag">批量设置</el-button>
            </div>
            <el-table :data="tableData" v-loading="tableLoading" :row-style="{ height: '40px' }"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column prop="userName" label="员工" align="center" width="110">
              </el-table-column>
              <el-table-column prop="dateRange" label="自动上下线时间" align="center">
                <template slot-scope="scope">
                  <el-time-picker is-range :editable="false" v-model="timeList[scope.$index]" range-separator="-"
                    start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" style="width: 100%"
                    format="HH:mm:ss" value-format="HH:mm:ss" :disabled="codeForm.ruleType === 1">
                  </el-time-picker>
                </template>
              </el-table-column>
              <el-table-column prop="dateActivationNumber" label="每日添加客户上限" align="center" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dateActivationNumber"
                    @change="regNumber($event, scope.$index, 'dateActivationNumber')"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="warningCount" label="每日添加客户不足预警" align="center" width="150">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.warningCount" @change="regNumber($event, scope.$index, 'warningCount')"></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="110">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleDeleteStaff(tableData, scope.$index, 'staff')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item label="兜底员工" required>
            <el-button icon="el-icon-plus" @click="selectBottomUserVisible = true">添加员工</el-button>
            <div>
              <el-tag size="medium" closable v-for="(item, index) in bottomStaff" :key="item.userId"
                style="margin-top: 15px" type="info" @close="handleDeleteStaff(bottomStaff, index)">{{ item.userName }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="打标签" prop="label">
            <tag-group v-model="codeForm.tagVOS" />
          </el-form-item>
          <el-form-item label="分组" prop="groupId">
            <el-select v-model="codeForm.groupId" clearable filterable placeholder="请选择分组" style="width: 100%">
              <el-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="wrap g-card">
        <div class="title-header">
          欢迎语设置
          <span class="sub-title">
            <i class="el-icon-warning-outline"></i>
            因企业微信限制，若使用成员已在[企业微信后台]配置了欢迎语，这里的欢迎语将不会生效
          </span>
        </div>
        <div class="greet-set ml20">
          <el-form-item label="设置欢迎语" prop="greetSpeech">
            <el-radio-group v-model="codeForm.greetSpeech">
              <el-radio :label="0">渠道欢迎语</el-radio>
              <el-radio :label="1">不发送欢迎语</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="greet-list" v-show="codeForm.greetSpeech == 0" v-for="(item, index) in codeForm.weMsgTlps" :key="index">
            <el-form-item label="">
              <div class="greet-form">
                <el-form-item label="时段" required>
                  <el-time-picker is-range :editable="false" v-model="weMsgTlpsTime[index]" range-separator="-"
                    start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" format="HH:mm:ss"
                    value-format="HH:mm:ss">
                  </el-time-picker>
                </el-form-item>
                <el-form-item label="文本" required>
                  <div class="input-button">
                    <el-input v-model="codeForm.weMsgTlps[index].welcomeMsg" clearable type="textarea" :rows="5" maxlength="400" show-word-limit></el-input>
                  </div>
                </el-form-item>
                <el-form-item label="选择素材">
                  <div @click="selectMaterial(index)">
                    <NormalSelectMaterial v-if="operateFlag" :selectedList="codeForm.weMsgTlps[index].mediaContentDetails" @confirmSelect="confirmSelectFn($event, index)" />
                  </div>
                </el-form-item>
                <el-form-item label="二维码" prop="codeUrl">
                  <NormalQrCode v-if="operateFlag" :codeInfo="codeParamsList[index]" @selectedSure="qrCodeConfrim($event, index)" @deleteSeletedQrcode="deleteSeletedQrcode(index)" />
                </el-form-item>
              </div>
            </el-form-item>
            <div class="right-close" @click="deleteList(index)">
              <svg-icon icon-class="right-close" />
            </div>
          </div>
          <el-form-item label="" v-show="codeForm.greetSpeech == 0">
            <el-button icon="el-icon-plus" @click="addWelcomeContent">添加欢迎语时段</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <!-- 选择使用员工弹窗 -->
    <SelectUser :selectList="tableDataName" :visible.sync="selectUserVisible" :userList="[]" @confirm="selectUserConfirm">
    </SelectUser>
    <!-- 选择兜底员工弹窗 -->
    <SelectUser :selectList="bottomStaffName" :userList="[]" :visible.sync="selectBottomUserVisible"
      @confirm="selectBottomUserConfirm"></SelectUser>
    <MakeLabel :visible.sync="addLabelVisible" :label="inputLabel"></MakeLabel>
    <!-- 批量设置 -->
    <el-dialog title="批量设置员工每日添加客户上限" :visible.sync="setLimitVisible" width="30%" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <div>
        <el-form>
          <el-form-item label="请输入上限值" label-width="120px">
            <el-input v-model="limitCount" placeholder="请输入上限值"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="setLimitVisible = false">取消</el-button>
        <el-button type="primary" @click="addLimitConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SelectUser from "@/components/SelectUser/index.vue";
import { categoryList } from "@/api/article/group";
import { nameValidate, getNowTime, regNumber } from "@/utils/validate";
import { verbalAdd, verbalDetail, verbalEdit } from "@/api/operate/verbalTrick";
import MakeLabel from "@/components/MakeLabel/index.vue";

export default {
  components: { SelectUser, MakeLabel },
  data() {
    return {
      pageLoading: false,
      optionFlag: false,
      tableDataName: [],
      bottomStaffName: [],
      dateRange: [],
      labelVal: "", // 控制有无二维码
      codeForm: {
        configId: "",
        label: '', // 打标签
        groupId: "", // 分组
        greetSpeech: 0, // 欢迎语
        ruleType: 1,
        weMsgTlps: [], // 欢迎语卡片
      },
      selectForm: {
        mediaContentDetails: [],
      },
      groupList: [],
      limitCount: "", // 批量设置
      rules: {
        welcomeMsg: [
          { required: true, validator: nameValidate("文本"), trigger: "blur" },
        ],
        groupId: [{ required: true, message: "请选择分组", trigger: "change" }],
      },
      selectUserVisible: false,
      selectBottomUserVisible: false,
      addLabelVisible: false,
      setLimitVisible: false,
      tableLoading: false,
      inputLabel: "", // 打标签
      addNickVisible: false,
      nickName: "", // 昵称
      nickIndex: null, // 记录为第几个卡片插入昵称
      tableData: [], // 被添加员工
      bottomStaff: [], // 兜底员工
      qrUserInfos: [], // 被添加员工(type:0)，兜底员工(type:1)
      flagIndex1: 0, // 计算时间段--被添加员工
      flagIndex2: 0, // 计算时间段--欢迎语时段
      selectIndex: 0, // 添加素材
      qrCodeForm: null, // qr组件传值
      radioIndex: null, // 判断点击的第几个欢迎语
      radioList: [],
      timeList: [],
      weMsgTlpsTime: [],
      qrCodeList: [],
      codeParamsList: [],
      operateFlag: '',
    };
  },
  watch: {
    "codeForm.ruleType": {
      handler() {
        if (this.codeForm.ruleType === 1) {
          let res = getNowTime();
          let dateRange = [
            new Date(
              res.year,
              res.month,
              res.day,
              0,
              0,
              0
            ).toLocaleTimeString(),
            new Date(
              res.year,
              res.month,
              res.day,
              23,
              59,
              59
            ).toLocaleTimeString(),
          ];
          this.timeList.forEach((item) => {
            item.beginTime = item.beginTime || dateRange[0];
            item.endTime = item.endTime || dateRange[1];
            item.dateRange = item.dateRange || dateRange;
          });
          // this.changeTable();
        }
      },
    },
    "codeForm.greetSpeech": {
      immediate: true,
      handler() {
        // 不发送欢迎语
        if (this.codeForm.greetSpeech === 1) {
          this.codeForm.weMsgTlps = [];
        }
        // else {
        //   if (this.codeForm.weMsgTlps.length === 0 && !this.$route.query.id) {
        //     this.codeForm.weMsgTlps.push({
        //       timeRange,
        //       content: "",
        //       qrCode: "",
        //     });
        //   }
        // }
      },
    },
    // 被添加员工
    selectUserVisible: {
      handler() {
        this.tableDataName = this.tableData.map((item) => {
          return { userId: item.userId, userName: item.userName, name: item.userName }
        });
      },
    },
    // 兜底员工
    selectBottomUserVisible: {
      handler() {
        this.bottomStaffName = this.bottomStaff.map((item) => {
          return { userId: item.userId, userName: item.userName, name: item.userName }
        });
      },
    },
  },
  methods: {
    // 选择素材
    selectMaterial(index) {
      this.selectIndex = index;
    },
    // 确定选择的素材
    confirmSelectFn(val, index) {
      this.codeForm.weMsgTlps[index].mediaContentDetails = val;
    },
    // 新增欢迎语时段
    addWelcomeContent() {
      let res = getNowTime();
      let timeRange = [
        new Date(res.year, res.month, res.day, 0, 0, 0).toLocaleTimeString(),
        new Date(res.year, res.month, res.day, 23, 59, 59).toLocaleTimeString(),
      ];
      this.codeForm.weMsgTlps.push({
        welcomeMsg: "",
        endValidTime: "",
        startValidTime: "",
        mediaContentDetails: [],
      });
      this.weMsgTlpsTime.push(timeRange);
      this.codeParamsList.push({
        qrState: 1,
        qrType: '',
        activityName: '',
        codeUrl: '',
        qrId: ''
      })
    },
    // 删除欢迎语时段
    deleteList(index) {
      this.codeForm.weMsgTlps.splice(index, 1);
      this.weMsgTlpsTime.splice(index, 1);
      this.codeParamsList.splice(index, 1);
    },
    // 二维码删除
    deleteSeletedQrcode(index){
      this.codeParamsList[index].qrType = '';
      this.codeParamsList[index].activityName = '';
      this.codeParamsList[index].codeUrl = '';
      this.codeParamsList[index].qrId = '';
      this.codeForm.weMsgTlps[index] = {
        ...this.codeForm.weMsgTlps[index],
        ...this.codeParamsList[index]
      }
    },
    // 二维码确定
    qrCodeConfrim(data, index){
      if (data) {
        this.codeParamsList[index] = {
          qrState: data.qrState,
          qrType: data.qrType,
          activityName: data.activityName,
          codeUrl: data.qrCode || data.codeUrl,
          qrId: data.qrId
        }
      } else {
        this.codeParamsList[index] = {
          qrState: 1,
          qrType: '',
          activityName: '',
          codeUrl: '',
          qrId: ''
        }
      }
      this.codeForm.weMsgTlps[index].codeState = this.codeParamsList[index].qrState;
      this.codeForm.weMsgTlps[index].qrType = this.codeParamsList[index].qrType;
      this.codeForm.weMsgTlps[index].activityName = this.codeParamsList[index].activityName;
      this.codeForm.weMsgTlps[index].codeUrl = this.codeParamsList[index].codeUrl;
      this.codeForm.weMsgTlps[index].qrId = this.codeParamsList[index].qrId;
      console.log(this.codeForm.weMsgTlps[index])
    },
    // 初始化
    init() {
      // 获取分组
      categoryList({ levelType: 3, mediaType: 1 }).then((res) => {
        if (res.code === 200) {
          this.groupList = res.data;
        }
      });
      // 周期
      this.getDicts("sys_sop_cycle").then((res) => {
        if (res.code === 200) {
          this.weekList = res.data;
        }
      });
      if (this.$route.query.id) {
        verbalDetail({ id: this.$route.query.id }).then((res) => {
          if (res.code === 200) {
            this.codeForm = { ...res.data };
            this.inputLabel = res.data.label;
            this.qrUserInfos = res.data.qrUserInfos;
            if (this.qrUserInfos.length) {
              this.qrUserInfos.forEach((item) => {
                if (item.weQrUserList.length) {
                  item.weQrUserList.forEach((items) => {
                    if (items.type == 1) {
                      this.bottomStaff.push(items);
                    } else {
                      if (items.dateActivationNumber == "99999") {
                        items.dateActivationNumber = "不限";
                      }
                      this.tableData.push(items);
                    }
                  });
                }
              });
            }
            this.tableData.forEach((item, index) => {
              let dateRange = [];
              dateRange.push(item.beginTime);
              dateRange.push(item.endTime);
              this.$set(this.timeList, index, dateRange);
            });
            this.codeForm.weMsgTlps.forEach((item, index) => {
              this.$set(this.weMsgTlpsTime, index, [item.startValidTime, item.endValidTime])
              this.codeParamsList.push({
                qrState: item.codeState,
                qrType: item.qrType || '',
                activityName: item.activityName || '',
                codeUrl: item.codeUrl || '',
                qrId: item.qrId || ''
              })
            });
            this.operateFlag = 'EDIT'
          }
        });
      } else {
        this.operateFlag = 'ADD'
      }
    },
    // timeList中的数组映射到tableData中
    changeTable() {
      this.timeList.forEach((item, index) => {
        this.tableData[index].beginTime = item[0];
        this.tableData[index].endTime = item[1];
      })
    },
    selectUserConfirm(value) {
      let res = getNowTime();
      let dateRange = [
        new Date(res.year, res.month, res.day, 0, 0, 0).toLocaleTimeString(),
        new Date(res.year, res.month, res.day, 23, 59, 59).toLocaleTimeString(),
      ];
      if (value.length) {
        value.forEach((item, index) => {
          if (this.tableData.length) {
            if (index >= this.tableData.length) {
              this.tableData.push({
                type: "0", // 0：添加员工 1：兜底员工
                userName: item.userName,
                userId: item.userId,
                beginTime: "",
                endTime: "",
                dateActivationNumber: "",
              });
              this.timeList.push(dateRange)
            }
          } else {
            this.tableData.push({
              type: "0", // 0：添加员工 1：兜底员工
              userName: item.userName,
              userId: item.userId,
              beginTime: "",
              endTime: "",
              dateActivationNumber: "",
            });
            this.timeList.push(dateRange)
          }
        });
      }
    },
    // 每日添加客户上线只保留数字
    regNumber(e, index, byte) {
      this.tableData[index][byte] = regNumber(e);
    },
    // 每日添加客户上线=不限的操作
    turnString() {
      if (this.tableData.length) {
        this.tableData.forEach((item) => {
          if (item.dateActivationNumber === "不限") {
            item.dateActivationNumber = 99999;
          }
        });
      }
    },
    // 兜底员工加标志type
    selectBottomUserConfirm(value) {
      this.bottomStaff = value;
      if (this.bottomStaff.length) {
        this.bottomStaff.forEach((item) => {
          item.type = "1";
        });
      }
    },
    handleDeleteStaff(value, index, type) {
      value.splice(index, 1);
      if (type === 'staff') {
        this.timeList.splice(index, 1);
      }
    },
    // 打开批量设置弹窗
    setOptions() {
      this.setLimitVisible = true;
      this.limitCount = '';
    },
    // 批量设置
    addLimitConfirm() {
      let num = regNumber(this.limitCount);
      if (this.tableData.length) {
        if (num <= 0) {
          return this.$message.error("只能录入正整数或不限！");
        } else {
          this.tableData.forEach((item) => {
            if (item.checked) {
              item.dateActivationNumber = num;
            }
          });
        }
      }
      this.setLimitVisible = false;
    },
    handleSelectionChange(val) {
      this.tableData.forEach((item) => {
        item.checked = false;
      });
      if (val.length) {
        this.optionFlag = true;
        val.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.optionFlag = false;
      }
    },
    // 欢迎语时段的映射
    changeMsgTlpsTime() {
      this.codeForm.weMsgTlps.forEach((item, index) => {
        item.timeRange = [];
        item.startValidTime = this.weMsgTlpsTime[index][0];
        item.endValidTime = this.weMsgTlpsTime[index][1];
        item.timeRange[0] = this.weMsgTlpsTime[index][0];
        item.timeRange[1] = this.weMsgTlpsTime[index][1];
      })
    },
    // 页面确认
    submit() {
      var falg = true;
      this.$refs.codeForm.validate((valid) => {
        if (valid) {
          // 被添加员工每日添加客户上限必录校验
          if (this.tableData.length === 0) {
            return this.$message.error("请选择被添加员工");
          } else {
            this.changeTable();
            falg = this.tableData.some((item, index) => {
              item.userIds = item.userId ? new Array(item.userId) : [];
              if (!item.dateActivationNumber) {
                return this.$message.error(
                  `请录入第${index + 1}位员工的每日添加客户上限`
                );
              } else if (!item.warningCount) {
                return this.$message.error(
                  `请录入第${index + 1}位员工的每日添加客户不足预警`
                );
              } else {
                this.turnString();
                return false;
              }
            });
            if (!falg) {
              // 兜底员工必录
              if (this.bottomStaff.length === 0) {
                return this.$message.error("请选择兜底员工");
              } else {
                this.bottomStaff.forEach((item) => {
                  item.userIds = item.userId ? new Array(item.userId) : [];
                });
                this.handleAddVerbal();
              }
            }
          }
        } else {
          this.$message.error("你还未录入完成，请核对后提交！");
          return false;
        }
      });
    },
    handleAddVerbal() {
      let someFlag = false;
      var flag = true;
      // 欢迎语校验
      if (this.codeForm.greetSpeech === 0) {
        if (this.codeForm.weMsgTlps.length === 0) {
          return this.$message.error("请录入欢迎语设置");
        } else {
          this.changeMsgTlpsTime();
          someFlag = this.codeForm.weMsgTlps.some((item) => {
            if (!item.timeRange) {
              return this.$message.error("欢迎语中时段为必录项，请录入！");
            } else if (!item.welcomeMsg) {
              return this.$message.error("欢迎语中文本为必录项，请录入！");
            }
            // else if (item.mediaContentDetails.length === 0) {
            //   return this.$message.error("欢迎语中选择素材为必录项，请录入！");
            // }
            if (item.codeState == 0 && !item.activityName) {
              return this.$message.error("欢迎语中选择有二维码时，请选择具体活码！");
            }
            item.mediaContentDetails.forEach(med => {
              if (med.mediaType == '3') {
                med.materialUrl = window.location.origin + '/h5/#/linkFile?id=' + med.id
              } else if (med.mediaType == '4') {
                med.materialUrl = window.location.origin + '/h5/#/linkArticle?id=' + med.id
              } else if (med.mediaType == '10') {
                med.materialUrl = window.location.origin + '/h5/#/linkForm?id=' + med.id
              }
            })
          });

          // 欢迎语设置的时间段校验
          if (!someFlag && this.codeForm.weMsgTlps.length > 1) {
            var flag = this.codeForm.weMsgTlps.some((item, index) => {
              return this.codeForm.weMsgTlps.some((current, cindex) => {
                if (index !== cindex) {
                  // 1. 不能相等
                  if (
                    item.startValidTime === current.startValidTime &&
                    item.endValidTime === current.endValidTime
                  ) {
                    return this.$message.error("欢迎语设置的时间段不能交叉！");
                  }
                  // 2.不能交叉   最大的比较
                  if (item.endValidTime <= current.endValidTime) {
                    if (item.endValidTime >= current.startValidTime) {
                      return this.$message.error("欢迎语设置的时间段不能交叉！");
                    }
                  }
                  // 2.不能交叉  最小的比较
                  if (item.startValidTime <= current.startValidTime) {
                    if (item.endValidTime >= current.startValidTime) {
                      return this.$message.error("欢迎语设置的时间段不能交叉！");
                    }
                  }
                }
              });
            });
          } else if (!someFlag && this.codeForm.weMsgTlps.length === 1) {
            // 只有一条欢迎语
            this.submitApi();
          }
        }
        // 提交
        if (!flag) {
          this.submitApi();
        }
      } else {
        // 选择不录入欢迎语
        this.submitApi();
      }
    },
    // 打开添加标签弹窗
    openLabelDialog(){
      this.addLabelVisible = true
    },
    submitApi() {
      let qrUserInfos = [];
      qrUserInfos = qrUserInfos.concat(this.tableData);
      qrUserInfos = qrUserInfos.concat(this.bottomStaff);
      let params = {
        ...this.codeForm,
        qrUserInfos,
      };
      this.pageLoading = true;
      if (this.$route.query.id) {
        verbalEdit(params).then((res) => {
          this.pageLoading = false;
          if (res.code === 200) {
            this.$message.success(res.data || "编辑成功");
            this.goBack();
          }
        }).catch((err) => {
          this.pageLoading = false;
        });
      } else {
        verbalAdd(params).then((res) => {
          this.pageLoading = false;
          if (res.code === 200) {
            this.$message.success(res.data || "新增成功");
            this.goBack();
          }
        }).catch((err) => {
          this.pageLoading = false;
        });
      }
    },
    // 返回
    goBack() {
      this.$router.back();
    },
    //添加员工打开选择员工弹窗
    selectUserAdd() {
      this.selectUserVisible = true
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.code-page {
  width: 100%;

  .header-btn {
    @include headerBtn;
    margin-bottom: 16px;
  }

  .wrap {
    @include titleWrap;
  }

  .from-wrap {
    background: #fff;
    padding: 0 20% 100px 0;
  }

  .base-set {
    width: 67.5%;

    .sub-text {
      display: inline-block;
      margin-right: 10px;
      color: rgba(192, 192, 192, 1);
      font-size: 13px;
    }

    .limit-style {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
  }

  .greet-set {
    width: 85%;

    .greet-form {
      border-radius: 5px 5px 5px 5px;
      border: 1px solid rgba(187, 187, 187, 0.57);
      padding: 15px;
      margin-bottom: 20px;
    }

    .input-button {
      display: flex;
      align-items: end;

      button {
        height: fit-content;
        margin-left: 10px;
      }
    }
  }

  .sub-title {
    color: rgba(192, 192, 192, 1);
    font-size: 13px;
    font-weight: 400;
    margin-left: 15px;
  }

  .label-text {
    color: rgba(189, 49, 36, 1);
    text-align: right;
  }

  .greet-list {
    position: relative;

    .right-close {
      position: absolute;
      right: 6px;
      top: 5px;
    }
  }
}
</style>
